<script setup lang="ts">
import { getProjectId } from '@/common/utils/cache/local-storage'
import { getSimEngineProjectContentApi } from '@/common/apis/engine-library'
import CodeEditor from '@@/components/CodeEditor/index.vue'
import { isEmpty } from 'lodash-es';
import { watch, ref } from 'vue'

interface Props {
  item: any | undefined;
  readonly: boolean;
  isSaveGame: boolean;
  noHeader: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  noHeader: true,
})
const emit = defineEmits(['handleSave', 'handleCancel'])
const loading = ref<boolean>(false)
const code = ref<string>('')
const editorRef = ref()
const enableEdit = ref<boolean>(false)
const isEdit = ref<boolean>(false)
const defaultCode = ref()

const handleSave = () => {
  code.value = editorRef.value.getEditContent()
  emit('handleSave', {
    editValue: code.value,
    fn: (flag: any) => {
      if (flag) {
        isEdit.value = false
        enableEdit.value = true
      }
    },
  })
};

const getFile = () => {
  if (props.item && props.item.is_directory === 0) {
    loading.value = true
    getSimEngineProjectContentApi(
      props.item.file_id
    )
      .then((data) => {
        code.value = data as string
        editorRef.value.setEditContent(code.value)
      })
      .finally(() => {
        loading.value = false
      });
  }
}

const handleEdit = () => {
  isEdit.value = true
  enableEdit.value = false
  defaultCode.value = code.value
};

const handleReset = () => {
  isEdit.value = false
  enableEdit.value = true
  code.value = defaultCode.value
  editorRef.value.setEditContent(defaultCode.value)
};

watch(
  () => props.item,
  () => {
    if (props.item == undefined) {
      enableEdit.value = false
      isEdit.value = false
      code.value = ""
      return;
    }
    if (props.item != undefined && props.item?.edit_enable != undefined && props.item?.edit_enable == false) {
      enableEdit.value = false
      isEdit.value = false
    } else {
      enableEdit.value = true
      isEdit.value = false
      code.value = ""
    }
    getFile()
  },
  { deep: true, immediate: true }
)

const isProject = computed(() => {
  return !isEmpty(getProjectId())
})
</script>

<template>
  <div class="cc-pane-item">
    <div class="cpi-content">
      <CodeEditor class="editor-container" ref="editorRef" v-model:code="code" :readonly="!isEdit" />
    </div>
    <div v-if="enableEdit" class="cpi-operate" :class="{ 'no-header': noHeader }">
      <el-button type="primary" @click="handleEdit">
        编辑
      </el-button>
    </div>
    <div v-else class="cpi-operate" :class="{ 'no-header': noHeader }">
      <el-button type="primary" @click="handleSave">
        保存
      </el-button>
      <el-button plain @click="handleReset">取消保存</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.cc-pane-item,
.cpi-content {
  width: 100%;
  height: 100%;
}

.cpi-operate {
  position: absolute;
  right: 30px;
  top: 20px;
  z-index: 999999;

  &.no-header {
    top: 32px;
  }
}

.ce-code {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
}

.editor-container {
  flex: 1;
}

.breadcrumb {
  margin-bottom: 10px;
}

.cc-pane-item.list {
  height: 100%;
}
</style>
